<template>
  <view class="risk-select-container">
    <!-- 标题区域 -->
    <view class="title-area">
      <text class="main-title">退休投资风险选择</text>
      <text class="sub-title">选择适合您的投资风险等级，规划退休财富～</text>
    </view>
    
    <!-- 风险等级按钮 -->
    <view class="risk-buttons">
      <button class="risk-button low-risk" @tap="selectRisk('low')">
        <text class="risk-icon">🛡️</text>
        <text class="risk-text">低风险</text>
      </button>
      
      <button class="risk-button medium-risk" @tap="selectRisk('medium')">
        <text class="risk-icon">⚖️</text>
        <text class="risk-text">中风险</text>
      </button>
      
      <button class="risk-button high-risk" @tap="selectRisk('high')">
        <text class="risk-icon">🚀</text>
        <text class="risk-text">高风险</text>
      </button>
    </view>
    
    <!-- 底部提示 -->
    <view class="bottom-note">
      <text>不同风险等级对应不同收益与波动，请谨慎</text>
      <text>选择～</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    selectRisk(riskLevel) {
      // 保存风险选择
      uni.setStorageSync('riskLevel', riskLevel);
      // 显示选择成功提示
		if (riskLevel === 'low') {
		  uni.redirectTo({ url: '/pages/simulator/investment-low' });
		} else if (riskLevel === 'medium') {
		  uni.redirectTo({ url: '/pages/simulator/investment-medium' });
		} else if (riskLevel === 'high') {
		  uni.redirectTo({ url: '/pages/simulator/investment-high' });
		}
    },
    
    getRiskText(level) {
      const riskMap = {
        'low': '低风险',
        'medium': '中风险',
        'high': '高风险'
      };
      return riskMap[level] || '未知风险';
    }
  }
};
</script>

<style scoped>
.risk-select-container {
  position: relative;
  min-height: 100vh;
  background-color: #ffffff;
  background: linear-gradient(180deg, #E6F0FF 0%, #FFFFFF 100%);
  padding: 60rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 标题区域 */
.title-area {
  text-align: center;
  margin-bottom: 80rpx;
  margin-top: 60rpx;
}

.main-title {
  font-size: 56rpx;
  font-weight: bold;
  color: #2D3748;
  margin-bottom: 20rpx;
  display: block;
}

.sub-title {
  font-size: 32rpx;
  color: #718096;
  line-height: 1.5;
}

/* 提示文字 */


/* 风险按钮容器 */
.risk-buttons {
  width: 100%;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
  margin-bottom: 100rpx;
  margin-top: 60rpx;
}

/* 风险按钮 */
.risk-button {
  width: 100%;
  height: 150rpx;
  border-radius: 20rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rpx;
  font-size: 40rpx;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.05), 0 5rpx 10rpx rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  backdrop-filter: blur(10rpx);
}

/* 点击动态效果 */
.risk-button:active {
  transform: translateY(8rpx) scale(0.98);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}
/* 悬停效果（非移动端但保持兼容） */
.risk-button:hover {
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.08), 0 5rpx 15rpx rgba(0, 0, 0, 0.03);
}

/* 低风险按钮 - 绿色渐变 */
.low-risk {
  background: linear-gradient(135deg, #e6f7ef 0%, #f0fff5 100%);
  color: #2D3748;
  border-color: rgba(167, 243, 208, 0.3);
}

/* 中风险按钮 - 橙色渐变 */
.medium-risk {
  background: linear-gradient(135deg, #fff6e6 0%, #fffbeb 100%);
  color: #2D3748;
  border-color: rgba(252, 211, 77, 0.3);
}

/* 高风险按钮 - 红色渐变 */
.high-risk {
  background: linear-gradient(135deg, #ffe6ec 0%, #fff2f6 100%);
  color: #2D3748;
  border-color: rgba(251, 113, 133, 0.3);
}

/* 风险图标 */
.risk-icon {
  font-size: 64rpx;
  display: block;
  transform: scale(1);
  transition: transform 0.2s ease;
}

.risk-button:active .risk-icon {
  transform: scale(1.1);
}

/* 风险文字 */
.risk-text {
  display: block;
}

/* 底部提示 */
.bottom-note {
  text-align: center;
  font-size: 28rpx;
  color: #718096;
  line-height: 1.6;
}
</style>